<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base">

<head>
	<meta charset="UTF-8" />
	<title th:text="#{documentMgr}">技术文档管理</title>

	<link href="/webResources/plugins/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/pageJquery/css/zxf_page.css"/>
	<link rel="stylesheet" href="/webResources/plugins/selectJquery/css/selectordie.css"/>
    <link rel="stylesheet" href="/webResources/plugins/selectJquery/css/selectordie_theme_01.css"/>
	<link href="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet"/>
	<link href="/webResources/plugins/jquery-lighter/stylesheets/jquery.lighter.css" rel="stylesheet"/>

	<style>
        .sod_select .sod_list {
            width: 300px;
        }
        .select { width: 300px; margin-left: -11%;height: 60%;margin-top: 2%}
        .sod_select { font-size: 12px;margin-top: -2px;float: left;height: 34px;padding-top: 10px;}
        .sod_select:after {top: 11px;}
        .doButton{
            margin-left:90%;
            background:transparent linear-gradient(to bottom, #1ec6ff, #0b74d5) repeat scroll 0% 0%;
            width:85px;
            height:35px;
            border-radius:2px;
            border:none;
            color: #fff;
            margin-top: 2%;
        }
        .doButton:hover{
            background: #0b74d5;
        }
        .sod_select .sod_list {
		    width: 100%;
		}
        .knowledgeInfo{float:left;width: 23%;height: 100%;}
        .knowledgeDev{float:left;width: 16%;height: 100%;padding-left:1%;padding-top:1.5%;font-size: 15px}
        .upLoader{float:left;width: 16%;height: 100%;;padding-top: 1.5%;font-size: 15px;padding-left: 1.2%}
        .upTime{float: left;width: 20%;height: 100%;font-size: 15px;padding-top: 1.5%;}
        .handle{float:left;width: 16%;height: 100%;padding-top: 1.4%;font-size: 15px;}
        .text-ellipsis{
        	overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
        }
        .content-ellipsis{
        	display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
        }
    </style>

	<script type="text/javascript" src="/webResources/plugins/datetimepicker/bootstrap-datetimepicker.min.js" ></script>
	<script type="text/javascript" src="/webResources/plugins/datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/document/documentManage.js"></script>
	<script type="text/javascript" src="/webResources/plugins/selectJquery/js/selectordie.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/pageJquery/js/zxf_page.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/page/createPageDefault.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jquery-lighter/javascripts/jquery.lighter.js" ></script>
    <script type="text/javascript" src="/webResources/plugins/vue/vue.js"></script>
</head>

<body>
	<div layout:fragment="content">
		<div id="files" v-cloak="v-cloak" style="width:100%;background:#F4F6F9;height:898px;">
			<input type="hidden" id="isDevice" name="isDevice" th:value="${isDevice}?${isDevice}:false"/>
			<!--<input type="hidden" id="types" name="types" th:value="${types}"/>
			<input type="hidden" id="uploaders" name="uploaders" th:value="${uploaders}"/>-->
			<input type="hidden" id="deviceSN" name="deviceSN" th:value="${device!=null?device.serialNo:''}"/>
			<input type="hidden" id="projectNo" name="projectNo" th:value="${device!=null?device.project.number:''}"/>
    		<div class="table-top">
        		<div class="title-big" th:text="#{documentMgr}">
            	文档管理
        		</div>
        		<div class="title-small">
		            &gt;
		        </div>
		        <a href="javascript:void(0)" onclick="javascript:history.go(-1);return false;" >
			    	<button class="back" th:text="#{return}"></button>
			    </a>
    		</div>
            <div class="device-div" style="height: 90%;">
                <div class="device-div-in">
                    <div class="company-select" v-cloak="v-cloak">
                        <div class="company-select-title" style="width: 5%;color: #0a0a0a" th:text="#{select}">
                            筛选：
                        </div>
                        <div class="time-select1" th:text="#{document.search.message}">
                            文档信息
                        </div>
                        <select name="type" id="type" class="myselect" style="float: left;height: 35px;">
                            <option th:each="type : ${types}" th:value="${type.typeValue}" th:text="#{'document.type.'+${type.typeValue}}"></option>
                        </select>
                        <div class="time-select1" th:text="#{document.search.uploadTime}">
                            上传日期
                        </div>
                        <div class="time-select">
                            <input class="form-control" id="lowerLimit" name="lowerLimit" type="text" th:placeholder="#{document.search.uploadTime.from}"/>
                        </div>
                        <div class="time-select2" th:text="#{to}">
                            至
                        </div>
                        <div class="time-select">
                            <input class="form-control" style="" id="upperLimit" name="upperLimit" type="text" th:placeholder="#{document.search.uploadTime.to}"/>
                        </div>
                        <div class="time-select1" style="height:90%;padding-top: 0px;width: 5%;margin-left: 2%">
                            <button class="company-button-new" id="empty" style="background:#ffffff;color: #999999;font-size:14px;height: 100%;margin-top: 0%;border: solid 1px #CCCCCC;" th:text="#{empty}">
                                清除
                            </button>
                        </div>
                        <div class="time-select1" style="height:90%;padding-top: 0px;width: 5%;margin-left: 1.5%">
                            <button class="company-button-new" id="confirm" style="font-size:14px;height: 100%;margin-top: 0%" th:text="#{confirm}">
                                确定
                            </button>
                        </div>
                        <div class="form-inline hidden-xs" style="float: right;margin-right: 3%;">
                            <div class="input-group input-medium">
                                <input id="searchContent" name="searchContent" class="form-control" placeholder="search" type="text"/>
                                <span class="input-group-btn">
                                    <button id="search" class="btn btn-success" style="background: #F2F6FC;border: solid 1px #CCCCCC;"><img src="/webResources/img/icon/search.png"/></button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div v-if="isDevice" class="company-select" v-cloak="v-cloak">
                        <div style="width: 37.1%;height: 100%;float: left;margin-left: 5.3%;">
                            <div class="time-select1" th:text="#{device.serialNo}" style="padding-top: 1.1%;width: 17%;">
                                设备序列号
                            </div>
                            <input style="float:left;width: 33%;" class="form-control" id="deviceSN" name="deviceSN" v-model="deviceSN" type="text" th:placeholder="#{device.serialNo}"/>
                            <div class="time-select1" th:text="#{customerService.projectNo}" style="padding-top: 1.1%;width: 16.2%;">
                                企业编号
                            </div>
                            <input style="float:left;width: 29.8%;" class="form-control" id="projectNo"  v-model="projectNo" name="projectNo" type="text" th:placeholder="#{customerService.projectNo}"/>
                        </div>
                    </div>
                <div style="margin-top:1.5%;background: #FFFFFF;height: 80%;">
                    <div style="height: 100%;">
                        <div style="width: 100%;height: 8%;border-bottom: 1px solid #dddddd">
                            <div th:text="#{document.fileName}" style="float:left;width: 31%;height: 100%;font-size: 15px;color: #697E99;font-weight: 900;padding-left: 11%;padding-top: 1%">
                                 文档信息
                            </div>
                            <div th:text="#{document.fileType}" style="float:left;width: 16%;height: 100%;font-size: 15px;color: #697E99;font-weight: 900;padding-left: 2%;padding-top: 1%">
                                    文档类型
                            </div>
                            <div th:text="#{document.uploader}" style="float:left;width: 16%;height: 100%;font-size: 15px;color: #697E99;font-weight: 900;padding-left: 2%;padding-top: 1%">
                                    上传人
                            </div>
                            <div th:text="#{document.uploadTime}" style="float:left;width: 21%;height: 100%;font-size: 15px;color: #697E99;font-weight: 900;padding-left: 3.5%;padding-top: 1%">
                                    上传时间
                            </div>
                            <div th:text="#{document.operate}" style="float:left;width: 16%;height: 100%;font-size: 15px;color: #697E99;font-weight: 900;padding-left: 2%;padding-top: 1%">
                                    操作
                            </div>
                        </div>
                  <div style="width: 100%;height: 100%">
                     <!-- 查询 -->
                     <div v-if="seenDetail" v-for="fileData in fileDatas" style="width:100%;height: 20%;border-bottom: 1px solid #EFEFEF"> <!--文档列表 -->
                        <div class="half-div">
                        <div style="float:left;width: 9%;height: 100%;">
                            <img v-if="picture.indexOf(fileData.suffix) >= 0" v-bind:src="'/fileDownload/'+fileData.fileId" style="margin: 8% 30%;"/>
                            <img v-else="v-else" v-bind:src="'/webResources/img/file/'+fileData.suffix+'.png'" style="margin: 8% 30%;"/>
                        </div>
                        <div class="knowledgeInfo" >
                            <div style="float: left;width: 100%;height: 50%;">
                                <div v-bind:title="fileData.highLightFileName" style="float:left;width: 100%;height: 50%;font-weight: 800;font-size: 15px;padding-left: 5%;padding-top: 6%">
                                    <p v-html="fileData.highLightFileName" class="text-ellipsis"></p>
                                </div>
                            </div>
                        </div> <!--文档信息 -->
                        <div class="knowledgeDev" >
                             {{fileData.type}}
                        </div><!-- 文档类型-->
                        <div class="upLoader" >
                             {{fileData.uploaderName}}
                        </div><!--上传人-->
                        <div class="upTime" >
                             {{fileData.uploadTime}}
                        </div><!--上传时间 -->
                        <div class="handle" >
                            <a v-bind:href="'/fileDownload/'+fileData.fileId"><img style="padding: 0 5px;" src="/webResources/img/file/download.png"/></a>
                            <a v-if="pdf.indexOf(fileData.suffix) >= 0" v-bind:href="'/webResources/plugins/pdfJS/web/viewer.html?file=/filePreview/'+fileData.fileId" target="_blank"><img style="padding: 0 5px;" src="/webResources/img/file/preview.png"/></a>
                            <a v-if="picture.indexOf(fileData.suffix) >= 0" v-bind:href="'/fileDownload/'+fileData.fileId" data-lighter="data-lighter"><img style="padding: 0 5px;" src="/webResources/img/file/preview.png"/></a>
                            <a v-on:click="deleteFile(fileData.fileId,fileData.id)" class="btn" style="padding: 0 5px;">
                                <img style="margin-top: -2px;" src='/webResources/img/file/delete.png'/>
                            </a>
                        </div>
                        </div>
                        <div class="half-div" style="height:45%">
                            <div style="width: 10%;height: 100%;float: left">
                            </div>
                            <div style="width: 82%;height: 100%;float: left">
                                <p class="content-ellipsis" v-html="fileData.highLightContent"></p>
                            </div>
                        </div>
                    </div>

                      <!-- 不查询 -->
                      <div v-if="!seenDetail" v-for="fileData in fileDatas" style="width:100%;height: 10%;border-bottom: 1px solid #EFEFEF"> <!--文档列表 -->
                        <div style="float:left;width: 9%;height: 100%;">
                            <img v-if="picture.indexOf(fileData.suffix) >= 0" v-bind:src="'/fileDownload/'+fileData.fileId" style="margin: 8% 30%;"/>
                            <img v-else="v-else" v-bind:src="'/webResources/img/file/'+fileData.suffix+'.png'" style="margin: 8% 30%;"/>
                        </div>
                        <div class="knowledgeInfo" >
                            <div style="float: left;width: 100%;height: 50%;">
                                <div v-bind:title="fileData.highLightFileName" style="float:left;width: 100%;height: 50%;font-weight: 800;font-size: 15px;padding-left: 5%;padding-top: 6%;">
                                    <p v-html="fileData.highLightFileName" class="text-ellipsis"></p>
                                </div>
                            </div>
                        </div> <!--文档信息 -->
                        <div class="knowledgeDev">
                                {{fileData.type}}
                        </div><!-- 文档类型-->
                        <div class="upLoader" >
                                {{fileData.uploaderName}}
                        </div><!--上传人-->
                        <div class="upTime" >
                            {{fileData.uploadTime}}
                        </div><!--上传时间 -->
                        <div class="handle documentTable">
                            <a v-bind:href="'/fileDownload/'+fileData.fileId"><img style="padding: 0 5px;" src="/webResources/img/file/download.png" /></a>
                            <a v-if="pdf.indexOf(fileData.suffix) >= 0" v-bind:href="'/webResources/plugins/pdfJS/web/viewer.html?file=/filePreview/'+fileData.fileId" target="_blank"><img style="padding: 0 5px;" src="/webResources/img/file/preview.png"/></a>
                            <a v-if="picture.indexOf(fileData.suffix) >= 0" v-bind:href="'/fileDownload/'+fileData.fileId" data-lighter="data-lighter"><img style="padding: 0 5px;" src="/webResources/img/file/preview.png"/></a>
                            <a v-on:click="deleteFile(fileData.fileId,fileData.id)" class="btn" style="padding: 0 5px;">
                                <img style="margin-top: -2px;" src='/webResources/img/file/delete.png'/>
                            </a>
                        </div>
                    </div>
                   <div id="dataPager"></div>
                  </div>
                </div>
            </div>
            </div>
            </div>
		</div>
	</div>
</body>

</html>
